<template>
    <div>
        <el-upload
            action="http://localhost:9000/api/third/Oss/policy"
            :data="dataObj"
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>
<script>

export default {
    name: "multiUpload",
    props: {
        //图片属性数组
        value: Array,
        //最大上传图片数量
        maxCount: {
            type: Number,
            default: 30,
        },
    },
    data() {
        return {
            dataObj: {
                policy: "",
                signature: "",
                key: "",
                ossaccessKeyId: "",
                dir: "",
                host: "",
                uuid: "",
            },
            dialogVisible: false,
            dialogImageUrl: null,
        };
    },
    computed: {
        fileList() {
            let fileList = [];
            for (let i = 0; i < this.value.length; i++) {
                fileList.push({ url: this.value[i] });
            }

            return fileList;
        },
    },
    mounted() {},
    methods: {
        emitInput(fileList) {
            let value = [];
            for (let i = 0; i < fileList.length; i++) {
                value.push(fileList[i].url);
            }
            this.$emit("input", value);
        },
        handleRemove(file, fileList) {
            this.emitInput(fileList);
        },
        handlePreview(file) {
            this.dialogVisible = true;
            console.log(file.url)
            this.dialogImageUrl = file.url;
        },
        beforeUpload(file) {
            // let _self = this;
            // return new Promise((resolve, reject) => {
            //     policy()
            //         .then((response) => {
            //             console.log("这是什么${filename}");
            //             _self.dataObj.policy = response.data.policy;
            //             console.log(_self.dataObj.policy)
            //             _self.dataObj.signature = response.data.signature;
            //             console.log(_self.dataObj.signature)
            //             _self.dataObj.ossaccessKeyId = response.data.accessid;
            //             console.log(_self.dataObj.ossaccessKeyId)
            //             _self.dataObj.key =
            //                 response.data.dir +
            //                 "/" +
            //                 getUUID() +
            //                 "_${filename}";
            //             _self.dataObj.dir = response.data.dir;
            //             _self.dataObj.host = response.data.host;
            //             resolve(true);
            //         })
            //         .catch((err) => {
            //             console.log("出错了...", err);
            //             reject(false);
            //         });
            // });
        },
        handleUploadSuccess(res, file) {
            this.dialogImageUrl = res.data
            console.log(this.dialogImageUrl)
            this.fileList.push({
                name: file.name,
                // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
                url: res.data
            });
            this.emitInput(this.fileList);
        },
        handleExceed(files, fileList) {
            this.$message({
                message: "最多只能上传" + this.maxCount + "张图片",
                type: "warning",
                duration: 1000,
            });
        },
    },
};
</script>
<style>
</style>


